<template>
	<view class="page">
		<zui-watermark :content="watermarkText" invert color="#666" blend="difference" :opacity="0.15" :cellWidth="180" :cellHeight="120" />
		<view class="nav-style" :style="{ height: navHeight - 15 + 'px', 'padding-top': 15 + 'px', lineHeight: navHeight + 'px', fontWeight: 600, fontSize: 18 + 'px' }">
			<image style="width: 40rpx; height: 40rpx" src="/static/image/back.png" mode="aspectFit" @click="back"></image>
			性伴检测
		</view>
		<view v-if="show" :style="{ marginTop: navHeight + 'px' }">
			<view class="list">
				<view class="child" v-for="(item, index) in tableData" :key="index">
					<view class="top-box" :class="item.selfresult == 1 ? 'bg1' : item.selfresult == 0 ? 'bg2' : 'bg3'">
						<view style="display: flex; align-items: center">
							<view class="pic">
								<image v-if="item.selfresult == 1" src="/static/image/reactive.png" mode="aspectFit"></image>
								<image v-if="item.selfresult == 0" src="/static/image/noreactive.png" mode="aspectFit"></image>
								<image v-if="item.selfresult == 3" src="/static/image/invalid.png" mode="aspectFit"></image>
								<image v-if="item.selfresult == 4" src="/static/image/invalid.png" mode="aspectFit"></image>
								<image v-if="item.selfresult == 5" src="/static/image/invalid.png" mode="aspectFit"></image>
							</view>
							<view class="dev">{{ item.deviceno }}</view>
						</view>
						<view class="detail" :class="item.selfresult == 1 ? 'c1' : item.selfresult == 0 ? 'c2' : 'c3'">
							{{ item.selfresult == 1 ? '有反应（待复查）' : item.selfresult == 0 ? '阴性': item.selfresult == 3 ? '未完成' : item.selfresult == 4 ? '无效' : '未检测' }}
						</view>
					</view>
					<view class="middle-box">
						<view style="display: flex; justify-content: space-between; align-items: center; margin-top: 20rpx">
							<view class="sex" style="width: 50%; text-align: left">
								<text style="color: #555555">性别:</text>
								{{ item.sex }}
							</view>
							<view class="age" style="width: 50%; text-align: left">
								<text style="color: #555555">年龄:</text>
								{{ item.age }}
							</view>
						</view>
						<view class="time">
							<text style="color: #555555">检测时间:</text>
							{{ item.resulttime?.slice(0, 10) }}
						</view>
						<view class="address">
							<text style="color: #555555">检测地点:</text>
							{{ item.resultaddress }}
						</view>
					</view>
					<view class="bottom-box">
						<view class="btn1" @click="detail(item, index)">详情</view>
						<view class="btn2" @click="updateSex(item, index)">编辑</view>
					</view>
				</view>
			</view>
			<view v-if="listshow">暂无数据~</view>
		</view>

		<view v-else>
			<view style="background-color: #f4f6f8; padding: 12px 15px">
				<view class="content" :style="{ marginTop: navHeight + 'px' }">
					<view class="one">
						<text class="label">性别</text>
						<uni-easyinput v-model="Info.sex" disabled   />
						<!-- <uni-data-checkbox v-model="Info.sex" :localdata="sex"></uni-data-checkbox> -->
					</view>
					<view class="one" style="width: 100%;">
						<view class="" style="20%">
							<text class="label">年龄</text>
						</view>
						<view class="" style="width: 80%;">
							<uni-easyinput v-model="Info.age" disabled  />
							<!-- // <uni-data-picker v-model="Info.age" :localdata="age" placeholder="请选择年龄" @change="changeAge"></uni-data-picker> -->
						</view>
		
					</view>
					<view class="one">
						<text class="label">确证时间</text>
						<uni-datetime-picker :border="false" type="date" placeholder="请选择确证时间" v-model="Info.diagnosetime" :end="currentDate" />
					</view>
					<view class="one">
						<text class="label" style="width: 100px">近6个月是否有无保护性行为</text>
						<uni-easyinput v-model="Info.unprotectaction" disabled  />
						<!-- <uni-data-checkbox v-model="Info.unprotectaction" :localdata="wbhOptions"></uni-data-checkbox> -->
					</view>
					<view class="one">
						<text class="label" style="width: 100px">近6个月是否有商业性性行为</text>
						<uni-easyinput v-model="Info.dangeraction" disabled  />
						<!-- <uni-data-checkbox v-model="Info.dangeraction" :localdata="syOptions"></uni-data-checkbox> -->
					</view>
					<view class="one">
						<text class="label" style="width: 100px">是否感染过梅毒、淋病等性传播疾病</text>
						<uni-easyinput v-model="Info.infectillness" disabled  />
						<!-- <uni-data-checkbox v-model="Info.infectillness" :localdata="cbOptions"></uni-data-checkbox> -->
					</view>
					<view class="one">
						<text class="label">可能的感染途径</text>
						<uni-easyinput v-model="Info.infectionmode" disabled  />
						<!-- <uni-data-picker v-model="Info.infectionmode" :localdata="grtj" placeholder="请选择可能的感染途径"></uni-data-picker> -->
					</view>
					<view class="one">
						<text class="label" style="width: 150px">性伴数(近六个月)</text>
						<uni-easyinput v-model="Info.sexquantity" disabled  />
						<!-- <uni-easyinput v-model="Info.sexquantity" type="number" clearable @change="changeSex" placeholder="请输入性伴数" /> -->
					</view>
					<view class="one">
						<text class="label" style="width: 150px">首次CD4</text>
						<uni-easyinput v-model="Info.firstcd4" type="number" placeholder="请输入首次CD4" />
					</view>
					<view class="one">
						<text class="label" style="width: 150px">首次病毒载量</text>
						<uni-easyinput v-model="Info.firstvl" type="number" placeholder="请输入首次病毒载量" />
					</view>
					<view class="one">
						<text class="label" style="width: 150px">新发感染检测结果</text>
						<uni-data-checkbox v-model="Info.newresult" :localdata="resOptions"></uni-data-checkbox>
					</view>
					<view class="one">
						<text style="color: red">*</text>
						<text class="label" style="width: 100px">是否愿意为性伴提供自检试剂</text>
						<uni-data-checkbox v-model="Info.inclination" :localdata="tgOptions"></uni-data-checkbox>
					</view>
					<view class="one" v-if="Info.inclination == '是'">
						<text style="color: red">*</text>
						<text class="label" style="width: 100px">提供自检试剂日期</text>
						<uni-datetime-picker :border="false" type="date" placeholder="请选择提供自检试剂日期" v-model="Info.obtaintime" :end="currentDate" />
					</view>

					<view class="one" style="margin-top: 10rpx; height: 200rpx" v-if="Info.inclination == '是'">
						<view style="height: 200rpx">
							<text style="color: red">*</text>
							<text class="label" style="width: 250rpx">提供的自检试剂编号</text>
						</view>
						<view style="height: 200rpx">
							<view style="display: flex; align-items: center; margin-bottom: 20rpx" v-for="item in deviceList" :key="item">
								<view style="display: inline-block; padding: 10rpx; background-color: #e9f8f7; margin-right: 10rpx; border-radius: 10rpx">
									{{ item }}
								</view>
								<uni-icons type="close" size="24" color="#c7c1bc" @click="removeOne(item)"></uni-icons>
							</view>
						</view>
						<view class="icon">
							<view @click="addOne" style="margin-left: 20rpx; margin-top: 20rpx">
								<uni-icons type="plus" size="24" color="#E10000"></uni-icons>
							</view>
							<view @click="sys" style="margin-left: 20rpx; margin-top: 60rpx">
								<image src="/static/image/sys.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="one" v-if="Info.inclination == '是'">
						<view>
							<text style="color: red">*</text>
							<text class="label" style="width: 250rpx">提供自检试剂数量</text>
						</view>
						<text>{{ devNum ? devNum : '' }}</text>
					</view>

					<view style="height: 100%">
						<view style="display: flex; width: 300rpx; justify-content: space-between">
							<text style="color: red">*</text>
							<text style="color: #222222; font-weight: 500; font-size: 28rpx">地址和商业类型</text>
						</view>
						<view class="" v-for="(item, index) in AddressArr" :key="index" style="border-bottom: 1rpx solid gray; padding-bottom: 10rpx">
							<view class="" style="width: 100%; display: flex; justify-content: space-around">
								<uni-easyinput disabled v-model="item.address" placeholder="请打开地图选择性交易位置" style="width: 50%" />
							<!-- 	<button
									@click="chooseLocation(index)"
									style="height: 70rpx; width: 18%; font-size: 25rpx; margin-left: 10rpx; background-color: #3791ff; color: #e9f8f7"
								>
									地图
								</button> -->
							</view>
							<view style="width: 100%; position: relative">
								<view class="" style="width: 80%;" >
									<uni-easyinput v-model="item.categor" disabled  />
									<!-- <uni-data-picker v-model="item.categor"  :localdata="Addressmap" placeholder="请选择商业类型"></uni-data-picker> -->
								</view>
								
							<!-- 	<button
									style="position: absolute; top: 0; right: 0; width: 18%; font-size: 25rpx; background-color: coral; color: #e9f8f7"
									@click="removeAddress(index)"
								>
									删除
								</button> -->
							</view>
						</view>
						<!-- <button style="width: 100%; font-size: 25rpx; background-color: #3791ff; color: #e9f8f7; margin-top: 20rpx" @click="addAddress">新增地址和商业类型</button> -->
					</view>
				</view>
			</view>

			<view class="btn-box" style="display: flex; justify-content: space-between">
				<button class="btn" style="width: 45%" @click="onCancel">取消</button>
				<button class="btn" style="width: 45%" @click="onSubmit">提交</button>
			</view>
		</view>

		<uni-popup ref="Dialog" type="dialog">
			<view class="dialog">
				<image src="https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png" class="img" mode=""></image>
				<view class="con">
					<view class="title">查看详情</view>
					<view class="info">
						<uni-forms label-width="160px">
							<uni-forms-item :label="item.question" v-for="(item,index) in arrData" :key="index">{{normalizeToString(item.optionIds)}}</uni-forms-item>
							<uni-forms-item label="唯一编号:">{{ info.id }}</uni-forms-item>
							<uni-forms-item label="性别:">{{ info.sex }}</uni-forms-item>
							<uni-forms-item label="年龄:">{{ info.age }}</uni-forms-item>
							<uni-forms-item label="确证时间:">{{ info.diagnosetime?.slice(0, 10) }}</uni-forms-item>
							<uni-forms-item label="最近3个月是否有无保护性行为:">{{ info.unprotectaction }}</uni-forms-item>
							<uni-forms-item label="最近3个月是否有商业性性行为:">{{ info.dangeraction }}</uni-forms-item>
							<uni-forms-item label="是否感染过梅毒、淋病等性传播疾病:">{{ info.infectillness }}</uni-forms-item>
							<uni-forms-item label="可能的感染途径:">{{ info.infectionmode }}</uni-forms-item>
							<uni-forms-item label="性伴数(近六个月):">{{ info.sexquantity }}</uni-forms-item>
							<uni-forms-item label="首次CD4:">{{ info.firstcd4 }}</uni-forms-item>
							<uni-forms-item label="首次病毒载量:">{{ info.firstvl }}</uni-forms-item>
							<uni-forms-item label="新发感染检测结果:">{{ info.newresult }}</uni-forms-item>
							<uni-forms-item label="是否愿意为性伴提供自检试剂:">{{ info.inclination }}</uni-forms-item>
							<uni-forms-item label="提供自检试剂日期:">{{ info.obtaintime?.slice(0, 10) }}</uni-forms-item>
							<uni-forms-item label="提供的自检试剂编号:">{{ info.deviceno }}</uni-forms-item>
							<uni-forms-item label="提供自检试剂数量:">{{ info.obtainnum }}</uni-forms-item>
							<uni-forms-item label="商业行为地址:">
								<view class="" v-for="(item, index) in info.prostitutemsgaddresses" :key="index">
									地址:{{ item.address }}
									<br />
									类型:{{ item.categor }}
								</view>
							</uni-forms-item>
						</uni-forms>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="添加" v-model="deviceno" placeholder="请输入单个设备编号" @confirm="confirm" maxlength="13"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { FindLoginUser, getSexList_Whoremaster, updateSex_Whoremaster, FindByUser } from '../../utils/api.js';
import uuid from '@/js_sdk/com-ls-utils/components/ls-utils/index.js';
export default {
	data() {
		return {
			watermarkText: '',
			statusBarHeight: '',
			navHeight: '',
			currentDate: new Date().toISOString().split('T')[0],
			show: true,
			listshow: false,
			UserId: null,
			arrData:[],
			lasttimetext: '',
			deviceno: '',
			Addressmap: [
				{ value: '商业性KTV(含夜总会,歌舞厅)', text: '商业性KTV(含夜总会,歌舞厅)' },
				{ value: '洗浴中心', text: '洗浴中心' },
				{ value: '酒吧', text: '酒吧' },
				{ value: '按摩店（含发廊）', text: '按摩店（含发廊）' },
				{ value: '酒店', text: '酒店' },
				{ value: '街头场所', text: '街头场所' },
				{ value: '出租屋/公寓', text: '出租屋/公寓' },
				{ value: '其他', text: '其他' }
			],
			search: {
				pagenumber: 1,
				pagesize: 10,
				starttime: null,
				endtime: null,
				deviceno: '',
				sex: '',
				seednum: ''
			},
			total: null,
			tableData: [],
			deviceList: [],
			AddressArr: [
				{
					address: '',
					latitude: '',
					longitude: '',
					categor: ''
				}
			],
			loading: true,
			pages: '',
			info: {},
			Info: {},
			index: null,
			jiance: '',
			isSelect: false,
			wbhOptions: [
				{
					text: '是',
					value: '是'
				},
				{
					text: '否',
					value: '否'
				}
			],
			tgOptions: [
				{
					text: '是',
					value: '是'
				},
				{
					text: '否',
					value: '否'
				}
			],
			syOptions: [
				{
					text: '是',
					value: '是'
				},
				{
					text: '否',
					value: '否'
				}
			],
			grtj: [
				{
					text: '同性',
					value: '同性'
				},
				{
					text: '异性',
					value: '异性'
				},
				{
					text: '注射吸毒',
					value: '注射吸毒'
				},
				{
					text: '输血',
					value: '输血'
				},
				{
					text: '母婴',
					value: '母婴'
				}
			],
			resOptions: [
				{
					text: '新发',
					value: '新发'
				},
				{
					text: '既往',
					value: '既往'
				},
				{
					text: '未检测',
					value: '未检测'
				}
			],
			sfcanyu: [
				{
					text: '是',
					value: '是'
				},
				{
					text: '否',
					value: '否'
				}
			],
			cbOptions: [
				{
					text: '是',
					value: '是'
				},
				{
					text: '否',
					value: '否'
				}
			],
			sex: [
				{
					text: '男',
					value: '男'
				},
				{
					text: '女',
					value: '女'
				}
			],
			age: Array.from(
				{
					length: 100
				},
				(_, i) => ({
					text: `${i + 1}岁`,
					value: i + 1
				})
			)
		};
	},
	onLoad(op) {
		this.FindLoginUser();
		this.GetList();
		var that = this;
		//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
		uni.getSystemInfo({
			success: (e) => {
				// this.compareVersion(e.SDKVersion, '2.5.0')
				let statusBar = 0;
				let customBar = 0;
				// #ifdef MP
				statusBar = e.statusBarHeight;
				customBar = e.statusBarHeight + 45;
				if (e.platform === 'android') {
					// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
					customBar = e.statusBarHeight + 50;
				}
				// #endif
				// #ifdef MP-WEIXIN
				statusBar = e.statusBarHeight;
				// @ts-ignore
				const custom = wx.getMenuButtonBoundingClientRect();
				customBar = custom.bottom + custom.top - e.statusBarHeight;
				// #endif

				// #ifdef APP-PLUS
				console.log('app-plus', e);
				statusBar = e.statusBarHeight;
				customBar = e.statusBarHeight + 45;
				// #endif

				// #ifdef H5
				statusBar = 0;
				customBar = e.statusBarHeight + 45;
				// #endif

				// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
				this.statusBarHeight = statusBar;
				this.navHeight = customBar;
			}
		});
	},
	onReachBottom() {
		this.search.pagenumber++;
		if (this.search.pagenumber <= this.pages && this.loading == false) {
			this.GetList();
		}
	},
	computed: {
		devNum() {
			return this.deviceList.length;
		}
	},
	methods: {
		// 删除指定地址项
		removeAddress(index) {
			uni.showModal({
			        title: '确认删除',
			        content: '您确定要删除这个地址吗？',
			        success: (res) => {
			            if (res.confirm) {
			                // 用户点击确认删除
			                if (this.AddressArr.length > 1) {
			                    this.AddressArr.splice(index, 1);
			                    uni.showToast({
			                        icon: 'success',
			                        title: '地址已删除',
			                        duration: 1500
			                    });
			                } else {
			                    uni.showToast({
			                        icon: 'none',
			                        duration: 2000,
			                        title: '至少保留一项'
			                    });
			                }
			            } else if (res.cancel) {
			                // 用户点击取消
			                console.log('用户取消了删除');
			            }
			        }
			    });
		},
		changeSex(e) {
			console.log(e);
			if (e) {
			} else {
				this.Info.sexquantity = 0;
				console.log(this.Info.sexquantity);
			}
		},
		// 用户选择地址地址
		chooseLocation(index) {
			uni.chooseLocation({
				success: (res) => {
					// res 包含了选择的地址信息
					console.log(res);
					// this.location = {
					// 	address: res.name,
					// 	latitude: res.latitude,
					// 	longitude: res.longitude
					// };
					this.$set(this.AddressArr, index, {
						...this.AddressArr[index],
						latitude: res.latitude + '',
						longitude: res.longitude + '',
						address: res.name
					});
					console.log('当前AddressArr', this.AddressArr);
				},
				fail: (err) => {
					console.log('选择位置失败:', err);
				}
			});
		},
		addOne() {
			this.$refs.inputDialog.open();
		},
		sys() {
			var that = this;
			uni.scanCode({
				success: function (res) {
					console.log(res);
					if (res.result.includes('JNA')) {
						if(that.deviceList.length>=3){
							uni.showToast({
								icon: 'none',
								duration: 2000,
								title: '最多下发三条设备'
							});
							return
						}
						// 判断扫的码是否正确
						if (res.result.length == 13) {
							// 条形码
							if (that.deviceList.includes(res.result)) {
								uni.showToast({
									icon: 'none',
									duration: 2000,
									title: '该设备编号已存在'
								});
							} else {
								that.FindByUser(res.result);
							}
						} else {
							// 二维码
							if (that.deviceList.includes(res.result.split(',')[1])) {
								uni.showToast({
									icon: 'none',
									duration: 2000,
									title: '该设备编号已存在'
								});
							} else {
								that.FindByUser(res.result.split(',')[1]);
							}
						}
					} else {
						uni.showToast({
							title: '请扫描正确的条形码或二维码',
							icon: 'none'
						});
					}
				}
			});
		},
		FindByUser(val) {
			FindByUser(val).then((res) => {
				if (res.code == 200) {
					if (res.data == 0) {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					} else if (res.data == 1) {
						this.deviceList.push(val);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}
				console.log(res);
			});
		},
		removeOne(one) {
			const list = this.deviceList.filter((item) => item !== one);
			this.deviceList = list;
		},
		confirm(e) {
			console.log(e);
			if (e.includes('JNA') && e.length == 13) {
				if(this.deviceList.length>=3){
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '最多下发三条设备'
					});
					return
				}
				if (this.deviceList.includes(e)) {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '该设备编号已存在'
					});
				} else {
					// this.deviceList.push(e)
					this.FindByUser(e);
				}
			} else {
				uni.showToast({
					icon: 'none',
					duration: 2000,
					title: '请输入正确的设备编号'
				});
			}
		},
		change(e) {
			console.log(e);
			if (e.detail.value == '否') {
				this.Info.lasttime = '';
				this.isSelect = true;
				// this.Info.lasttime = "从未检测"
			} else {
				this.Info.lasttime = '';
				this.isSelect = false;
			}
			console.log();
		},
		back() {
			uni.navigateBack();
		},
		changePage(e) {
			this.search.pagenumber = e.current;
			this.GetList();
		},
		changeAge(e) {
			console.log(e.detail.value);
			if (e.detail.value.length == 0) {
				this.Info.age = 0;
				console.log(this.Info.age);
			}
		},
		async FindLoginUser() {
			const res = await FindLoginUser();
			this.UserId = res.data.userid;
			this.watermarkText = res.data.admininfo.name;
		},
		GetList() {
			uni.showLoading({
				title: '加载中'
			});
			getSexList_Whoremaster(this.search)
				.then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.hideLoading();
						this.loading = false; // 没加载
						this.total = res.total;
						this.pages = Math.ceil(this.total / 10); // 总页数
						this.tableData = [...this.tableData, ...res.data];
						if (this.tableData.length) {
						} else {
							this.listshow = true;
						}
					}
				})
				.catch((err) => {
					console.log(err);
				});
			this.loading = true;
		},
		detail(e, index) {
			this.index = index;
			this.info = JSON.parse(JSON.stringify(this.tableData[index]));
			this.arrData=e.questionnaireOption
			this.$refs.Dialog.open('center');
		},
		updateSex(e, index) {
			console.log(e);
			this.show = false;
			this.index = index;
			this.Info = JSON.parse(JSON.stringify(this.tableData[index]));
            this.AddressArr=this.Info.prostitutemsgaddresses
			console.log('当前编辑',this.Info);
			// if (this.Info.inclination == '否') {
			// 	this.deviceList = [];
			// } else {
			// 	if (e.deviceno.length > 13) {
			// 		this.deviceList = [];
			// 		this.deviceList = this.Info.deviceno.split(',');
			// 	} else {
			// 		this.deviceList = [];
			// 		this.deviceList.push(this.Info.deviceno);
			// 	}
			// }

			// if (e.lasttime == "从未检测") {
			// 	this.jiance = '否'
			// 	// this.Info.lasttime = ''
			// 	this.info.lasttime = ''
			// 	this.isSelect = true
			// } else if (e.lasttime == null) {
			// 	this.jiance = '否'
			// } else {
			// 	this.jiance = '是'
			// }
		},
		onSubmit() {
			console.log('当前cd4', this.Info.firstcd4);
			// 获取需要验证的三项
			let { firstcd4, firstvl, sexquantity } = this.Info;

			// 检查每一项是否为数字，并给出具体提示
			if (isNaN(firstcd4)) {
				uni.showToast({
					title: '首次CD4必须填写数字',
					icon: 'error',
					duration: 2000
				});
				return;
			}

			if (isNaN(firstvl)) {
				uni.showToast({
					title: '首次病毒载量必须填写数字',
					icon: 'error',
					duration: 2000
				});
				return;
			}

			if (isNaN(sexquantity)) {
				uni.showToast({
					title: '性伴数必须填写数字',
					icon: 'error',
					duration: 2000
				});
				return;
			}

			var that = this;
			uni.showModal({
				title: '提示',
				content: '确认并提交',
				success: function (res) {
					if (res.confirm) {
						that.Info.prostitutemsgaddresses = that.AddressArr;
						if (that.Info.inclination == '是') {
							that.Info.sexDeviceNums = that.deviceList.toString();
							that.Info.obtainnum = that.devNum;
							console.log(that.Info);
							if (that.Info.inclination && that.Info.obtaintime && that.Info.sexDeviceNums && that.Info.obtainnum) {
								updateSex_Whoremaster(that.Info)
									.then((res) => {
										console.log(res);
										if (res.code == 200) {
											uni.showToast({
												title: '修改成功',
												duration: 2000
											});
											(that.search.pagenumber = 1), (that.tableData = []);

											setTimeout(() => {
												that.show = true;
												that.AddressArr = [
													{
														address: '',
														latitude: '',
														longitude: '',
														categor: ''
													}
												];
												that.addShow = true;
												that.GetList();
											}, 2000);
										} else if (res.code == 805) {
											uni.showToast({
												icon: 'none',
												title: res.message,
												duration: 2000
											});
										} else {
											uni.showToast({
												icon: 'none',
												title: '请仔细检查填写信息是否有误',
												duration: 2000
											});
										}
									})
									.catch((err) => {
										console.log(err);
										uni.showToast({
											icon: 'none',
											title: '请联系管理员处理',
											duration: 2000
										});
									});
							} else {
								uni.showToast({
									title: '请输入必填项',
									icon: 'none',
									duration: 2000
								});
							}
						} else {
							console.log(that.Info);
							that.Info.obtainnum = 0;
							that.Info.obtaintime = null;
							that.Info.sexDeviceNums = '';
							updateSex_Whoremaster(that.Info)
								.then((res) => {
									console.log(res);
									if (res.code == 200) {
										uni.showToast({
											title: '修改成功',
											duration: 2000
										});
										(that.search.pagenumber = 1), (that.tableData = []);
										setTimeout(() => {
											that.show = true;
											that.AddressArr = [
												{
													address: '',
													latitude: '',
													longitude: '',
													categor: ''
												}
											];
											that.addShow = true;
											that.GetList();
										}, 2000);
									} else if (res.code == 805) {
										uni.showToast({
											icon: 'none',
											title: res.message,
											duration: 2000
										});
									} else {
										uni.showToast({
											icon: 'none',
											title: '请填写正确信息',
											duration: 2000
										});
									}
								})
								.catch((err) => {
									console.log(err);
								});
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		onCancel() {
			this.info = JSON.parse(JSON.stringify(this.tableData[this.index]));
			this.show = true;
			console.log(this.tableData);
		},
		normalizeToString(value) {
		  if (Array.isArray(value)) {
		    return value.join(',');
		  }
		  // 如果不是数组，直接转为字符串（处理 null/undefined 等情况）
		  return value != null ? String(value) : '';
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100vh;
	position: relative;
	display: flex;
	flex-direction: column;
	// overflow-x: scroll;

	.nav-style {
		background-image: url('https://www.shlxkj.info:10010/%E5%81%A5%E5%BA%B7%E6%A1%A3%E6%A1%88/zsafimg/bgimg.png');
		background-size: cover;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		display: flex;
		padding-left: 23rpx;
		align-items: center;
		justify-content: center;

		image {
			position: absolute;
			left: 15px;
		}

		text {
			position: absolute;
			right: 15px;
		}
	}

	.list {
		// overflow: scroll;
		padding: 30rpx;
		border-radius: 12rpx;
		background-color: #f4f6f8;
		// padding-bottom: 60rpx;

		.child {
			border-radius: 12rpx;
			background-color: #fff;
			padding-bottom: 12rpx;
			margin-bottom: 30rpx;

			.bg1 {
				background: linear-gradient(90deg, #ffe5e5 0%, #fff8f8 100%);
			}

			.bg2 {
				background: linear-gradient(90deg, #d4f7e8 0%, #e8fff5 100%);
			}

			.bg3 {
				background: linear-gradient(90deg, #e4ecf0 0%, #f2f7fa 100%);
			}

			.bg4 {
				color: #ff3737;
				background: #ffe5e5;
			}

			.bg5 {
				color: #1fb373;
				background: #c6fbe4;
			}

			.bg6 {
				color: #96a4ab;
				background: #e4edf0;
			}

			.bg7 {
				background: #e1f2ff;
				color: #0090ff;
			}

			.bg8 {
				background: #e1f2ff;
				color: #4a6a83;
			}

			.top-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 16rpx 24rpx;
				border-radius: 12rpx 12rpx 0 0;

				.pic {
					width: 40rpx;
					height: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.dev {
					margin-left: 20rpx;
					font-weight: 500;
					font-size: 27rpx;
					color: #222222;
				}

				.detail {
					background: #ffffff;
					border-radius: 19rpx 19rpx 19rpx 19rpx;
					padding: 6rpx 16rpx;
					font-weight: 400;
					font-size: 19rpx;
					// color: #FF3737;
				}
				.c1 {
					color: #ff3737;
				}
				.c2 {
					color: #1fb373;
				}
				.c3 {
					color: #96a4ab;
				}
			}

			.middle-box {
				margin-left: 24rpx;

				.sex,
				.age,
				.time,
				.address {
					line-height: 40rpx;
					margin-top: 16rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
				}
			}

			.bottom-box {
				// margin: 27rpx 0 27rpx 24rpx;
				margin: 30rpx 0;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;

				.btn1,
				.btn2 {
					width: 45%;
					text-align: center;
					// background: #FFFFFF;
					border-radius: 12rpx;
					padding: 15rpx 0;
					font-weight: 400;
					font-size: 32rpx;
				}

				.btn1 {
					border: 1px solid #00aeff;
					color: #00aeff;
				}

				.btn2 {
					background: linear-gradient(90deg, #a4edf1 0%, #00aeff 100%);
					color: #fff;
				}
			}
		}
	}

	.content {
		background-color: #fff;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 20rpx;
		.one {
			height: 84rpx;
			padding: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f4f4f4;

			.label {
				color: #222222;
				font-weight: 500;
				font-size: 28rpx;
			}
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.btn-box {
		background-color: #fff;
		padding: 40rpx;

		.btn {
			// width: 95%;
			height: 105rpx;
			// margin: 100rpx auto 0;
			color: #ffffff;
			font-weight: 500;
			font-size: 40rpx;
			background: linear-gradient(90deg, #a4edf1 0%, #00aeff 100%);
			box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(14, 98, 122, 0.15);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.btn:nth-child(2) {
			background: linear-gradient(90deg, #00aeff 0%, #a4edf1 100%);
		}
	}

	.btnbox {
		display: flex;

		.sign {
			background: linear-gradient(#639cff, #1e64e0);
			margin-top: 20rpx;
			color: #fff;
		}
	}

	.dialog {
		// width: 90%;
		width: 600rpx;
		height: 1000rpx;
		position: relative;
		border-radius: 5px;
		z-index: 99;

		.img {
			width: 100%;
			height: 1000rpx;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 5px;
			z-index: -1;
		}

		.con {
			padding: 30rpx 20rpx;
			z-index: 99;

			.title {
				width: 300rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 18px;
				font-weight: 600;
			}

			.info {
				margin-top: 30rpx;
				padding: 20rpx;
				width: 520rpx;
				height: 800rpx;
				overflow-y: scroll;
				background-color: #fff;
				opacity: 0.7;
				border-radius: 10px;
			}
		}
	}

	// 输入框
	::v-deep .uni-easyinput__content {
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
	
	::v-deep .uni-easyinput__content-input {
		height: 84rpx;
		text-align: center;
	}
	
	::v-deep .is-input-border {
		border: none;
	}
	
	::v-deep .uni-easyinput__placeholder-class {
		text-align: right;
	}
	
	::v-deep .content-clear-icon {
		display: none;
	}
	
	// 时间选择器
	::v-deep .uni-date-editor {
		text-align: right;
	}
	
	::v-deep.uni-date-x .uni-date-single {
	}
	
	::v-deep .icon-calendar {
		position: absolute;
		right: 0 !important;
	}
	
	::v-deep .uni-date__icon-clear {
		display: none;
	}
	
	::v-deep .uni-date__x-input {
		margin-right: 50rpx;
	}
	
	// 下拉框
	::v-deep .selected-area,
	.placeholder,
	.selected-list {
		justify-content: flex-end !important;
		text-align: right !important;
		font-size: 14px;
	}
	
	::v-deep .input-value-border {
		border: none;
	}
	
	// 单选框
	::v-deep .checklist-group {
		justify-content: flex-end;
	}
	
	::v-deep .selected-list {
		display: block;
		text-align: center;
	}
	.uni-forms-item {
		display: flex;
		align-items: center;
	}
	::v-deep .uni-data-tree{
		// width: 80%;
	}
	::v-deep .uni-forms-item__label{
		height: auto;
	}
}
</style>
